<template>
	<view class="feedback-page">
		<!-- 顶部导航栏，自动处理安全距离 -->
		<u-navbar title="意见反馈" :is-back="true"></u-navbar>

		<!-- 意见内容输入 -->
		<view class="input-area">
			<textarea v-model="content" placeholder="请描述您遇到的问题或建议..." :maxlength="500" class="feedback-textarea" />
			<view class="char-counter">{{ content.length }}/500</view>
		</view>

		<!-- 图片上传区域 -->
		<view class="upload-area">
			<view class="upload-title">上传图片（选填）</view>
			<view class="image-uploader">
				<!-- 已选择的图片预览 -->
				<view v-if="imagePath" class="image-preview-wrapper">
					<image :src="imagePath" mode="aspectFill" class="image-preview" @click="previewImage" />
					<view class="delete-icon" @click="deleteImage">
						<u-icon name="close-circle-fill" color="#fa3534" size="22"></u-icon>
					</view>
				</view>
				<!-- 添加图片按钮 -->
				<view v-else class="add-image-btn" @click="chooseImage">
					<u-icon name="plus" color="#cccccc" size="40"></u-icon>
					<text class="add-text">添加图片</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-button-wrapper">
			<u-button type="primary" shape="circle" @click="submitFeedback">提交反馈</u-button>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';

export default {
	data() {
		return {
			content: '', // 反馈内容
			imagePath: '' // 选择的图片临时路径
		};
	},
	methods: {
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.imagePath = res.tempFilePaths[0];
				},
				fail: (err) => {
					console.error('选择图片失败:', err);
				}
			});
		},
		// 预览图片
		previewImage() {
			if (!this.imagePath) return;
			uni.previewImage({
				urls: [this.imagePath]
			});
		},
		// 删除图片
		deleteImage() {
			this.imagePath = '';
		},
		// 提交反馈
		submitFeedback() {
			if (!this.content.trim()) {
				return this.$u.toast('反馈内容不能为空');
			}
			uni.showLoading({
				title: '提交中...',
				mask: true
			});

			uni.uploadFile({
				url: request.baseUrl + '/api/user/saveOpinion',
				filePath: this.imagePath,
				name: 'file',
				header: {
					token: uni.getStorageSync('token')
				},
				formData: {
					msg: this.content
				},
				success: (uploadRes) => {
					uni.hideLoading();
					try {
						const data = JSON.parse(uploadRes.data);
						if (uploadRes.statusCode === 200 && data.code === 1) {
							this.$u.toast('提交成功，感谢您的反馈！');
							// 清空数据
							this.content = '';
							this.imagePath = '';
							// 延迟返回
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							throw new Error(data.msg || '提交失败，请稍后重试');
						}
					} catch (e) {
						this.$u.toast('服务器响应异常');
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('提交失败:', err);
					this.$u.toast('网络请求失败，请检查网络连接');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.feedback-page {
	padding: 30rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.input-area {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	position: relative;
}

.feedback-textarea {
	width: 100%;
	height: 300rpx;
	font-size: 28rpx;
	line-height: 1.6;
	padding-bottom: 40rpx;
}

.char-counter {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	font-size: 24rpx;
	color: #999;
}

.upload-area {
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}

.upload-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.image-uploader {
	display: flex;
}

.add-image-btn {
	width: 180rpx;
	height: 180rpx;
	border: 2rpx dashed #cccccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f9f9f9;
}

.add-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.image-preview-wrapper {
	width: 180rpx;
	height: 180rpx;
	position: relative;
}

.image-preview {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.delete-icon {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background-color: #fff;
	border-radius: 50%;
}

.submit-button-wrapper {
	margin-top: 60rpx;
}
</style>
